<template>
  <div class="app">
    <div class="nav-menu">
      <div class="nav-mask">
            <div class="daohan">

               <el-button type="text"><a href="/#/" class="navf">首页</a></el-button>
               <el-button type="text"><a href="/#/python" class="navf">Python</a></el-button>
               <el-button type="text"><a href="/#/java" class="navf">Java</a></el-button>
               <el-button type="text"><a href="/#/fronted" class="navf">前端</a></el-button>
               <el-button type="text"><a href="/#/backed" class="navf">后端</a></el-button>
               <el-button type="text"><a href="/#/devops" class="navf">运维</a></el-button>
               <el-button type="text"><a href="/#/ai" class="navf">人工智能</a></el-button>
               <el-button type="text"><a href="/#/security" class="navf">安全</a></el-button>
               <el-button type="text"><a href="/#/other" class="navf">其他</a></el-button>

               <el-input  placeholder="请输入搜索内容" v-model="keyword" class="input-with-select navf1">
                <el-button slot="append" icon="el-icon-search" @click="search(keyword)"></el-button>
              </el-input>

                <el-dropdown  class="Icon">
            <div v-if="userInfo.username!=''" class="top10">
              <img :src="userInfo.authorImg" class="user-logo"/>
            </div>
            <div v-else class="top10">
              <img src="./assets/default.jpg" class="user-logo"/>
            </div>
            <el-dropdown-menu v-if="userInfo.username!=''" slot="dropdown">
              <div class="userbar">
                <div class="showusername" style="text-align: center;top:100px">
                  <span>欢迎您,{{userInfo.username}}</span>
                </div>
              <div class="member-menu">
                <div style="text-align:center">
                  <i class="el-icon-user-solid"></i>
                <a href="#/user/profile" style="text-decoration:none">
                    <span style="color:#000000;font-weight: bold">个人中心</span>
                </a>
                </div>
              </div>
              <div class="member-bottom">
              <a href="javascript:void()" class="logout" @click="logout">注销</a>
              </div>
              </div>
            </el-dropdown-menu>
            <el-dropdown-menu v-else slot="dropdown">
              <div class="img">
              <img src="./assets/danmutext.png" class="test">
              </div>
              <div>
              <el-button  style="width:100%" @click="loginpage" type="primary">登录
              </el-button>
              <div style="text-align:center">
              <span style="font-size:10px">首次使用?
                <a href="#/user/register" style="text-decoration:none">点我注册</a>
              </span>
              </div>
              </div>
            </el-dropdown-menu>
          </el-dropdown>
            </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import {apiurl} from "../src/service/api"

export default {
  name: 'App',
  created(){
      //获取主页数据
      var that = this
    that.$axios.get({
            url: apiurl.userInfo,
            type: 'application/json;charset=UTF-8'
          }).then(res=>{
            that.userInfo.username = res.data.userInfo.username
            that.userInfo.authorImg = res.data.userInfo.authorImg
            //用于路由拦截
            localStorage.setItem("username",that.userInfo.username)
          })
  },
  data(){
    return{
      userInfo:{
        username : '',
        authorImg : '',
      },
      keyword:'',
    }
  },methods:{
    loginpage(){
      this.$router.push('/user/login')
    },
    //当注销时，删除本地信息并且删除本地cookie
    setCookie(cname, cvalue, exdays) {
      var d = new Date();
      d.setTime(d.getTime() + (exdays*24*60*60*1000));
      var expires = "expires="+d.toUTCString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    },
    logout(){
      //通知后端删除uuid缓存
      var that =this
      that.$axios.get({
        url:apiurl.delToken,
      }).then(res=>{
        this.$router.push('/')
        location.reload()
        //清空本地cookie
        this.setCookie("uuid", "", -1);
      })
    },
    search(keyword){
      this.$router.push('/search/'+keyword)
      location.reload()
    }
  }
}
</script>

<style scoped>
  .nav-menu{
    position: relative;
    z-index: 200;
    height: 42px;
    color: #222;
    background: rgba(255, 0, 0, 0.835)
  }
  .nav-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0,0%,100%,.4);
    box-shadow: 0 1px 2px rgba(0,0,0,.1);
  }
  .user-logo {

    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: #f8f8f8;
    display: inline-block;
  }
  .top10 {
    position: relative;

  }
  .logout {
    float: right;
    padding-right: 20px;
    color: #222;
    text-decoration:none;
  }
   .member-menu{
    border-top: 1px solid #e5e9ef;
    padding: 10px 20px 100px;
    background: url('assets/clound.jpg')
  }
  .member-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    background-color: #f4f5f7;
    border-radius: 0 0 4px 4px;
  }
  .userbar{
    width: 320px;
    height: 200px;
    background: #ffffff;
    position: relative;
  }
  .test{
      width: 320px;
    margin: 20px auto;
    text-align: center;
  }
  .img{
    width: 320px;
    height: 200px;
    position: relative;
    background: url('assets/danmu.png')
  }
  .Icon{
    position: absolute;
    top:5px;
    margin-left: 35%;
  }
  .navf{
    position: relative;
    font-weight: bold;
    color:black;
    text-decoration:none;
  }
  .navf1{
    position: relative;
    width: 200px;
    margin-top: 1px;
    margin-left: 100px;
  }

</style>
